{% extends 'abstract_edit.html' %}
{% load i18n static %}
{% load common %}
{% block edit_form %}
  {{ block.spuper }}
  <div id="{{ model_name }}_edit_form" class="layui_body page-form" style="min-height: 300px;">
    <form class="layui-form" action="" method="post" id="rule-data-form" lay-filter="attRuleForm">
      {% csrf_token %}
      <div class="layui-tab" style="padding-top: 20px;">
        <ul class="layui-tab-title">
          <li>{% trans 'attRule_globalRule_basicSetting' %}</li>
          <li class="layui-hide">{% trans 'attRule_globalRule_weekendSetting' %}</li>
          <li>{% trans 'attRule_globalRule_overtimeSetting' %}</li>
          <li class="layui-this">{% trans 'attRule_globalRule_calculationSetting' %}</li>
          <li>{% trans 'attRule_globalRule_appSetting' %}</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item">
            <div class="layui-form-item" style="padding-top: 20px">
              {% layui_inline form.punch_period %}
            </div>
          </div>
          <div class="layui-tab-item layui-hide">
            <div class="layui-hide">{% layui_inline form.weekend %}</div>
            <div id="weekendSettingContainer"><table id="weekendSettingTB" class="layui-hide" lay-filter="weekendSettingTB"></table></div>
          </div>
          <div class="layui-tab-item" style="height: 300px;">
            <div class="layui-form-item" style="padding-top: 20px;">
              {% layui_inline form.use_ot %}
            </div>
          </div>
          <div class="layui-tab-item layui-show">
            <fieldset class="layui-elem-field layui-field-title fieldset-title">
              <legend>{% trans 'attRule_globalRule_calculationRule' %}</legend>
            </fieldset>
            <div class="base-setting base-setting-large4">
              <div class="layui-form-item" style="margin-bottom: 3px;">
                <div class="layui-inline field-mins_late_absent">
                  <label class="layui-form-label" for="id_mins_late_absent">{% trans 'attRule_globalRule_lateExceedPrefix' %}<span
                    class="required">*</span></label>
                  <div class="layui-input-inline ">
                    <input type="number" name="mins_late_absent" value="100" lay-verify="mins_late_absent" required=""
                           class="layui-input" id="id_mins_late_absent" min="0">
                  </div>
                  <div class="layui-form-mid">{% trans 'attRule_globalRule_lateExceedSuffix' %}</div>
                </div>
              </div>
              <div class="layui-form-item" style="margin-bottom: 3px;">
                <div class="layui-inline field-mins_early_absent">
                  <label class="layui-form-label" for="id_mins_early_absent">{% trans 'attRule_globalRule_earlyLeaveExceedPrefix' %}<span
                    class="required">*</span></label>
                  <div class="layui-input-inline ">
                    <input type="number" name="mins_early_absent" value="100" lay-verify="mins_early_absent" required=""
                           class="layui-input" id="id_mins_early_absent" min="0">
                  </div>
                  <div class="layui-form-mid">{% trans 'attRule_globalRule_earlyLeaveExceedSuffix' %}</div>
                </div>
              </div>
              <div class="layui-form-item" style="margin-bottom: 3px;">
                {% layui_inline form.miss_in %}
                {% layui_inline_without_label form.miss_in_mins %}
              </div>
              <div class="layui-form-item" style="margin-bottom: 3px;">
                {% layui_inline form.miss_out %}
                {% layui_inline_without_label form.miss_out_mins %}
              </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title fieldset-title">
              <legend>{% trans 'attRule_globalRule_calculationItem' %}</legend>
            </fieldset>
            <div class="base-setting">
              <div class="layui-form-item" style="margin-bottom: 3px;">
                {% layui_inline form.check_in %}
                {% layui_inline form.check_out %}
              </div>
              <div class="layui-form-item" style="margin-bottom: 3px;">
                {% layui_inline form.break_out %}
                {% layui_inline form.break_in %}
              </div>
              <div class="layui-form-item" style="margin-bottom: 3px;">
                {% layui_inline form.overtime_in %}
                {% layui_inline form.overtime_out %}
              </div>
            </div>
          </div>
          <div class="layui-tab-item" style="padding-top: 20px;height: 300px;">
            <div class="layui-form-item">
              {% layui_inline form.enable_capture %}
              {% layui_inline form.enable_workcode %}
            </div>
            <div class="layui-form-item">
              {% layui_inline form.enable_funckey %}
            </div>
          </div>
        </div>
      </div>
      <div class="layui-fixbar">
        <a class="layui-btn" lay-submit lay-filter="att-rule-submit">{% trans 'attRule_globalRule_btnSave' %}</a>
      </div>
    </form>
  </div>
{% endblock edit_form %}

{% block page_script %}
  {{ block.super }}
  <script>
    $(function () {
      layui.use(['form', 'element', 'table'], function () {
        var form = layui.form, element=layui.element, table=layui.table, $=layui.jquery;
        var weekendSettingData = [
          {'weekday': "{% trans 'attRule_globalRule_monday' %}", 'enable': 0, 'policy': 0, 'lv1': 0, 'lv2': 0, 'lv3': 0}
          ,{'weekday': "{% trans 'attRule_globalRule_tuesday' %}", 'enable': 0, 'policy': 0, 'lv1': 0, 'lv2': 0, 'lv3': 0}
          ,{'weekday': "{% trans 'attRule_globalRule_wednesday' %}", 'enable': 0, 'policy': 0, 'lv1': 0, 'lv2': 0, 'lv3': 0}
          ,{'weekday': "{% trans 'attRule_globalRule_thursday' %}", 'enable': 0, 'policy': 0, 'lv1': 0, 'lv2': 0, 'lv3': 0}
          ,{'weekday': "{% trans 'attRule_globalRule_friday' %}", 'enable': 0, 'policy': 0, 'lv1': 0, 'lv2': 0, 'lv3': 0}
          ,{'weekday': "{% trans 'attRule_globalRule_saturday' %}", 'enable': 0, 'policy': 0, 'lv1': 0, 'lv2': 0, 'lv3': 0}
          ,{'weekday': "{% trans 'attRule_globalRule_sunday' %}", 'enable': 0, 'policy': 0, 'lv1': 0, 'lv2': 0, 'lv3': 0}
        ];
        var weekendSettingOpts = {
          id: 'weekendSettingTB'
          ,elem: '#weekendSettingTB'
          , height: "full-325"
          , text: {none: gettext('none_data')}
          , request: {
            pageName: 'page',
            limitName: 'page_size'
          }
          , page: false
          , limit: 50
          , limits: [50, 100]
          , cols: [[
            {field: 'weekday', width:"120", title: ''}
            ,{field: 'enable', width:"80", title: "{% trans 'attRule_weekendSetting_titleWeekend' %}", templet: function (data) {
                return '<input id="enable'+data.LAY_TABLE_INDEX+'"  type="checkbox" lay-filter="enable" lay-skin="switch" lay-text="{% trans 'boolean_option_yes' %}|{% trans 'boolean_option_no' %}" lay-filter="weekend" '+(parseInt(data.enable)===1?"checked":"")+'>'
            }}
            ,{field: 'policy', width:"200", title: '{% trans 'attRule_weekendSetting_workingOnDay' %}', templet: function (data) {
              // console.log(data)
              return '<select id="policy'+data.LAY_TABLE_INDEX+'" lay-filter="policy">'
                +'<option value="0"'+(parseInt(data.policy)===0?"selected":"")+'>{% trans 'unscheduled_ignore' %}</option>'
                +'<option value="1"'+(parseInt(data.policy)===1?"selected":"")+'>{% trans 'unscheduled_move2normalWork' %}</option>'
                +'<option value="2"'+(parseInt(data.policy)===2?"selected":"")+'>{% trans 'unscheduled_move2normalOvertime' %}</option>'
                +'<option value="3"'+(parseInt(data.policy)===3?"selected":"")+'>{% trans 'unscheduled_move2weekendOvertime' %}</option>'
                +'<option value="4"'+(parseInt(data.policy)===4?"selected":"")+'>{% trans 'unscheduled_move2holidayOvertime' %}</option>'
                +'</select>'
            }}
            ,{field: 'lv1', width:"200", title: '{% trans 'attRule_weekendSetting_OTLV1' %}', templet: function (data) {
                return '<input id="lv1'+data.LAY_TABLE_INDEX+'" class="layui-input" type="number" name="lv1" value="'+data.lv1+'" lay-filter="lv1" min="0" lay-verify="required|ot_lv">'
            }}
            ,{field: 'lv2', width:"200", title: '{% trans 'attRule_weekendSetting_OTLV2' %}', templet: function (data) {
                return '<input id="lv2'+data.LAY_TABLE_INDEX+'" class="layui-input" type="number" name="lv2" value="'+data.lv2+'" lay-filter="lv2" min="0" lay-verify="required|ot_lv">'
            }}
            ,{field: 'lv3', width:"200", title: '{% trans 'attRule_weekendSetting_OTLV3' %}', templet: function (data) {
                return '<input id="lv3'+data.LAY_TABLE_INDEX+'" class="layui-input" type="number" name="lv3" value="'+data.lv3+'" lay-filter="lv3" min="0" lay-verify="required|ot_lv">'
            }}
          ]]
          ,data: weekendSettingData
          ,done: function () {
            bindChnage();
          }
        };
        var bindChnage = function(){
          $(".layui-form input[name='lv1']").change(function () {
            var cacheData = layui.table.cache['weekendSettingTB'];
            var index = this.id.replace("lv1", "");
            cacheData[index]['lv1'] = $(this).val();
            table.reload(weekendSettingOpts.id, $.extend(true, {data: cacheData}));
          });
          $(".layui-form input[name='lv2']").change(function () {
            var cacheData = layui.table.cache['weekendSettingTB'];
            var index = this.id.replace("lv2", "");
            cacheData[index]['lv2'] = $(this).val();
            table.reload(weekendSettingOpts.id, $.extend(true, {data: cacheData}));
          });
          $(".layui-form input[name='lv3']").change(function () {
            var cacheData = layui.table.cache['weekendSettingTB'];
            var index = this.id.replace("lv3", "");
            cacheData[index]['lv3'] = $(this).val();
            table.reload(weekendSettingOpts.id, $.extend(true, {data: cacheData}));
          });
        };
        table.render(weekendSettingOpts);
        form.render();
        element.render();
        function fillFormData(paramValue) {
          var weekend = paramValue.weekend;
          for(var index in weekend){
              $.extend(weekendSettingData[index], weekend[index], {'enable': 1});
          }
          table.reload(weekendSettingOpts.id, $.extend(true, {data: weekendSettingData}));
          if (parseInt(paramValue.miss_in) > 2) {
            paramValue.miss_in = 0
          }
          if (parseInt(paramValue.miss_out) > 2) {
            paramValue.miss_out = 0
          }
          form.val('attRuleForm', $.extend(paramValue, {
            leave_include_in: 2
            , leave_include_out: 2
            , training_include_in: 2
            , training_include_out: 2
          }));
          var miss_in = (parseInt(paramValue.miss_in) === 1);
          $("#id_miss_in_mins").attr('disabled', !miss_in);
          var miss_out = (parseInt(paramValue.miss_out) === 1);
          $("#id_miss_out_mins").attr('disabled', !miss_out);
          form.render();
        }
        form.on('switch(enable)', function (data) {
          var cacheData = layui.table.cache['weekendSettingTB'];
          var index = data.elem.id.replace("enable", "");
          cacheData[index]['enable'] = data.elem.checked?1:0;
          table.reload(weekendSettingOpts.id, $.extend(true, {data: cacheData}));
        });
        form.on('select(policy)', function (data) {
          var cacheData = layui.table.cache['weekendSettingTB'];
          var index = data.elem.id.replace("policy", "");
          cacheData[index]['policy'] = data.value;
          table.reload(weekendSettingOpts.id, $.extend(true, {data: cacheData}));
        });
        form.on('select(miss_in)', function(data){
            var selectValue = data.value;
            var style = !(selectValue === '1');
            $("#id_miss_in_mins").attr('disabled', style);
        });
        form.on('select(miss_out)', function(data){
            var selectValue = data.value;
            var style = !(selectValue === '1');
            $("#id_miss_out_mins").attr('disabled', style);
        });
        function fetchData() {
          var apiUrl = "/att/api/att_rules/global_att_rule/";
          $.ajax({
            url: apiUrl,
            type: "GET",
            dataType: 'json',
            success: function (result) {
              var paramValue = JSON.parse(result.param_value);
              fillFormData(paramValue);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
              alert(textStatus + errorThrown);
            }
          });
        }
        fetchData();
        form.verify({
          ot_lv: function(value, item){
             if(value < 0){
               return gettext("form_verify_invalidNumber");
             }
          }
          ,punch_period: [/^([0-9]{1,3}|1[0-3][0-9][0-9]|14[0-3][0,9]|1440)$/, gettext("form_verify_invalidNumber")]
          ,mins_late_absent: [/^([1-9]|[1-9][0-9]|[1-9][0-9][0-9]|1[0-3][0-9][0-9]|14[0-3][0,9]|1440)$/, gettext("form_verify_invalidNumber")]
          ,mins_early_absent: [/^([1-9]|[1-9][0-9]|[1-9][0-9][0-9]|1[0-3][0-9][0-9]|14[0-3][0,9]|1440)$/, gettext("form_verify_invalidNumber")]
          ,miss_in_mins: [/^([0-9]{1,3}|1[0-3][0-9][0-9]|14[0-3][0,9]|1440)$/, gettext("form_verify_invalidNumber")]
          ,miss_out_mins: [/^([0-9]{1,3}|1[0-3][0-9][0-9]|14[0-3][0,9]|1440)$/, gettext("form_verify_invalidNumber")]
        });
        form.on('submit(att-rule-submit)', (function () {
          var cacheData = layui.table.cache['weekendSettingTB'];
          var weekend = {};
           for(var index=0; index<cacheData.length; index++){
                var item = cacheData[index];
                if(item.enable === 1){
                    if((parseInt(item.lv3) < parseInt(item.lv2)) || (parseInt(item.lv2) < parseInt(item.lv1)) || (parseInt(item.lv3) < parseInt(item.lv1)))
                    {
                        layer.alert("{% trans 'timeInterval_error_invalidCheckOvertimeLevel' %}",
                              {title: gettext('layer_title_error'), icon: 2, time: 3000, btn: []});
                        return false;
                    }
                    weekend[index] = {'policy': item.policy, 'lv1': item.lv1, 'lv2': item.lv2, 'lv3': item.lv3}
                }
          }
          $("#id_weekend").val(JSON.stringify(weekend));
          var action_url = "/att/att_rule_page/";
          var data_form = "#rule-data-form";
          return submit_callback(action_url, {
            'alternative_form': data_form
          })();
        }));
      });
    });
  </script>
{% endblock page_script %}